@include keyframes(ripple-pop) {
  from {
    @include transform(scale(0));
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  to {
    @include transform(scale(1));
    opacity: 0;
  }
}

.ripple {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #00bcd4;
  border-radius: 100%;
  opacity: 0;

  pointer-events: none;
  display: block;

  &.animate {
    @include animation(ripple-pop 0.5s $easeOutQuint);
  }
}
